<template>
  <div class="view-wrapper">
    
    <!-- app-container -->
    <div class="head">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="" prop="keyword">
          <el-input v-model="queryParams.keyword" placeholder="客户id/客户名称/联系方式" clearable />
        </el-form-item>
        <!-- <el-form-item label="行业类型：" prop="industryType">
          <el-select v-model="queryParams.industryType" placeholder="请选择">
            <el-option v-for="item in industryList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="客户类型：" prop="clientType">
          <el-select v-model="queryParams.clientType" placeholder="请选择">
            <el-option v-for="item in clientList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户负责人：" prop="responsiblePersonIdList">
          <el-select v-model="queryParams.responsiblePersonIdList" placeholder="请选择" multiple>
            <el-option v-for="item in responsiblePersonList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运营负责人：" prop="operationManagerList">
          <el-select v-model="queryParams.operationManagerList" placeholder="请选择" multiple>
            <el-option v-for="item in operationManagerSelect" :key="item.id" :label="item.nickName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户来源：" prop="clientSource">
          <el-select v-model="queryParams.clientSource" placeholder="请选择">
            <el-option v-for="item in sourceList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户级别：" prop="clientLevel">
          <el-select v-model="queryParams.clientLevel" placeholder="请选择">
            <el-option v-for="item in levelList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="签约状态：" prop="signStatus">
          <el-select v-model="queryParams.signStatus" placeholder="请选择">
            <el-option v-for="item in signList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务状态：" prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择">
            <el-option v-for="item in serviceList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="林客账号状态：" prop="tiktokLinkeStatus">
          <el-select v-model="queryParams.tiktokLinkeStatus" placeholder="请选择">
            <el-option v-for="item in tiktokLinkeList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门：" prop="deptName">
          <el-select v-model="queryParams.deptName" placeholder="请选择">
            <el-option v-for="item in deptNameList" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="timeType">
          <el-select v-model="queryParams.timeType" placeholder="请选择">
            <el-option v-for="item in timeTypeList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
            <el-date-picker clearable v-model="date" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="changeTime"
              placeholder="请选择">
            </el-date-picker>
          </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="listBox">
      <div class="listBox_head">
        <div class="navBox">
          <div class="navList" v-for="(item,index) in navList" :key="index" @click="handleNav(item.id)">
            <div class="txt">{{item.value}}</div>
            <div class="xian" v-if="item.id == current"></div>
          </div>
        </div>
        <div class="right">
          <el-button type="primary"  @click="addClick">创建客户档案</el-button>
          <el-button type="primary" @click="customerFollowUp">客户跟进</el-button>
          <export-excel-button title="客户档案" action="/client/list/export" :params="queryParams" type="2" v-if="hasPermission == 1" />
        </div>
        
      </div>
      <el-table
        v-loading="loading"
        ref="multipleTable"
        :data="tabList"
        stripe
        border
        tooltip-effect="dark"
        style="width: 100%"
        @sort-change="sortChange"
      >
        <el-table-column label="序号" align="center" type="index" width="64px" />
        <el-table-column label="客户id" prop="id"  align="center"></el-table-column>
        <el-table-column label="客户名称" prop="clientName"  align="center"></el-table-column>
        <el-table-column label="客户来源" prop="sourceName"  align="center"></el-table-column>
        <el-table-column label="客户类型" prop="clientTypeName"  align="center"></el-table-column>
        <el-table-column label="客户级别" prop="clientLevelName" width="120px"  align="center">
          <template slot-scope="{}" slot="header">
                <span>客户级别</span>
                <el-tooltip class="item" effect="dark" placement="top">
                <i class="el-icon-question tip_icon"></i>
                <div slot="content">
                    <p>超头客户 支付GMV≥100万元</p>
                    <p>头部客户 支付GMV≥50万元</p>
                    <p>腰部客户 支付GMV≥10万元</p>
                    <p>尾部客户 支付GMV&lt;10万元</p>
                </div>
                </el-tooltip>
            </template>
        </el-table-column>
        <el-table-column label="客户负责人" prop="responsiblePerson" align="center" width="100"></el-table-column>
        <el-table-column label="运营负责人" prop="operationManager" align="center" width="100"></el-table-column>
        <el-table-column label="签约状态" prop="signStatusStr" align="center"></el-table-column>
        <el-table-column label="服务状态" prop="statusStr" align="center"></el-table-column>
        
        <el-table-column label="服务时间" prop="serviceTime" align="center" width="110"></el-table-column>
        <!-- <el-table-column label="服务类型" prop="serviceType"></el-table-column> -->
        <el-table-column label="服务佣金" prop="serviceCommission" align="center"></el-table-column>
        <!-- <el-table-column label="客户状态" prop="statusStr"></el-table-column> -->
        <el-table-column label="直播场次" prop="liveNum" align="center"></el-table-column>
        <el-table-column label="短视频数量" prop="shortVideoNum" align="center" width="140"></el-table-column>
        <el-table-column label="服务完成度" prop="completionRate" sortable="custom" align="center" width="120"></el-table-column>
        <el-table-column label="抖音林客账号" prop="tiktokLinkeStatusStr" align="center" width="110"></el-table-column>
        <el-table-column label="林客商户ID" prop="" align="center" width="110">
          <template slot-scope="scope">
            <span class="merchant_id_span" @click="associationView(scope.row.id)">{{ scope.row.dyLkMerchantId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="最后更新时间" prop="updateTime" align="center" width="100"></el-table-column>
        <el-table-column label="客户备注" prop="remark" align="center" width="200" ></el-table-column>
        <el-table-column label="创建时间" prop="createTime" align="center" width="100"></el-table-column>                         
        <el-table-column
          label="操作"
          align="center"
          width="180"
          class-name="small-padding fixed-width"
          fixed="right"
        >
          <template slot-scope="scope">
            <!-- <el-button size="mini" type="text" @click="editClick(scope.row)" v-if="scope.row.status == 1">完善服务信息</el-button> -->
            <el-button size="mini" type="text" @click="lookClick(scope.row)">查看</el-button>
            <!-- <el-button size="mini" type="text" @click="editClick(scope.row)"  v-if="scope.row.status != 1">编辑</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="pagination"></pagination>
    </div>
    <Dialog v-bind="$attrs" v-if="dialogVisible" :id="id" :pathType="pathType" :visible.sync="dialogVisible" @success="_handleSuccess">
    </Dialog>
  </div>
</template>

<script>
  import {
    getList,
    getAllList,
    responsibleSelect,
    getPermission,
    removeProduct,
    deptList,
    exportPermission,
    bindLkMerchant,
    managerSelect
  } from "@/api/customer/customerFile";
  import {
    userInfo
  } from "@/api/customer/reportingForm";
  import {
    shopTypeTree,
  } from "@/api/merchants";
  import { getToken } from '@/utils/auth'
  import Dialog from "./components/dialog";

  import ExportExcelButton from "@/components/ExportExcelButton/index";
  
  export default {
    name: "CustomerFile",
    components: {
      Dialog,
      ExportExcelButton
    },
    data() {
      return {
        dialogId: '',
        dialogVisible: false,
        removeDialogVisible: false,
        // 遮罩层
        loading: false,
        // 导出遮罩层
        // 总条数
        total: 0,
        //表格数据
        tabList: [],
        pathType: 'add',
        current: '',
        // 查询参数
        queryParams: {
          timeType: 1,
          pageNum: 1,
          pageSize: 10,
          keyword: '',//查询关键字
          responsiblePersonIdList: [],//客户负责人
          operationManagerList:[],//运营负责人
          clientType: '', //客户类型 1 渠道运营商 2 大单店商户 3 连锁商户 bee_client_type
          industryType: '', //行业类型 1 餐厅 2 丽人 3 烘培 4 租车 5 商超 6 其他 bee_client_industry_type
          beginTime: '', //创建开始时间
          endTime: '', //创建结束时间
          clientSource: '',//客户来源 1 自开发 2 渠道商 3 其他 bee_client_source	q
          clientLevel: '',//客户级别 bee_client_level
          signStatus: '',//签约状态 bee_client_sign_status
          status: '',//服务状态 bee_client_status
          clientFilterType: '',//客户筛选类型 1 我的客户 2 下属客户
          sort: '',//排序字段 1 服务完成度
          sortType: '',//排序类型 1 升序 2 降序
          tiktokLinkeStatus: '',//抖音林客账号状态
          deptName: '',//部门名称
        },
        date: [],
        industryList: [],
        clientList: [],
        responsiblePersonList: [],
        operationManagerSelect:[],//运营负责人下拉
        shopType: "",
        navList: [],
        timeTypeList: [
          {id: 1, value: '创建时间'},
          {id: 2, value: '最后更新时间'},
          {id: 3, value: '服务时间'},
        ],
        sourceList: [
          {id: '',value: '全部'},
        
        ],//客户来源
        levelList: [
          {id: '',value: '全部'},
         
        ],//客户级别
        signList: [ 
          {id: '',value: '全部'},
        ],//签约状态
        serviceList: [
          {id: '',value: '全部'},
        ],//服务状态
        tiktokLinkeList: [
          {id: '',value: '全部'},
        ],//抖音林客账号状态
        imgList: [],
        deptNameList: [
          '全部',
        ],
        ids: '',
        isDown: false,
        isResponsible: 1,//是否负责人 1 否 2 是
        hasAllPermission: '',//拥有全部客户权限 1 有 2 无
        hasPermission: '',//拥有客户档案导出权限 1 有 2 无
      };
    },
    computed: {
      ExportParams() {
        const params = {
          ids: this.ids,
        };
        return params;
      },
    },
    created() {
      this.getdept()
      this.getDict()
      
      this.getresponsiblePersonList() 
      this.getoperationManagerSelect() 
      this.getPermission()
      this.getExportPermission()
    },
    methods: {
      getPermission(){
        getPermission().then((res) => {
           this.hasAllPermission = res.result.hasAllPermission
           if(this.hasAllPermission == 1){
            this.queryParams.clientFilterType = ''
            this.getAllList()
            this.navList = [
              {id: '', value: '全部客户'},
              {id: '1', value: '我的客户'},
              {id: '2', value: '下属客户'},
            ]
           }else{
            this.current = 1
            this.queryParams.clientFilterType = 1
            this.navList = [
              {id: '1', value: '我的客户'},
              {id: '2', value: '下属客户'},
            ]
            this.getList();
           }
        })
        .finally(() => {
          this.loading = false;
        });
       
      },
      // 导出权限
      getExportPermission(){
        exportPermission().then(res => {
          this.hasPermission = res.result.hasPermission
        })
      },
      getdept(){
        deptList().then((res) => {
          this.deptNameList = this.deptNameList.concat(res.result) 
        })
      },
      pagination(){
        if(this.hasAllPermission == 1 && this.current == ''){
          this.getAllList()
        }else{
          this.queryParams.clientFilterType = this.current
          this.getList();
        }
      },
       //获取状态字典
       getDict() {
        var dictType = "bee_client_industry_type,bee_client_type,bee_client_source,bee_client_level,bee_client_sign_status,bee_client_status,bee_client_tiktok_linke_status";
        this.$getSelectList(dictType)
          .then((res) => {
            this.industryList = res.result[0].dictList
            this.clientList = res.result[1].dictList
            this.sourceList = this.sourceList.concat(res.result[2].dictList) 
            this.levelList = this.levelList.concat(res.result[3].dictList) 
            this.signList = this.signList.concat(res.result[4].dictList) 
            this.serviceList =  this.serviceList.concat(res.result[5].dictList) 
            this.tiktokLinkeList =  this.tiktokLinkeList.concat(res.result[6].dictList) 
          })
          .finally(() => {
            this.loading = false;
          });
          console.log('this.industryList',this.industryList)
      },
      // 运营负责人下拉
      getoperationManagerSelect(){
        managerSelect().then((res) => {
           this.operationManagerSelect = res.result
        })
        .finally(() => {
          this.loading = false;
        });
      },
      //客户负责人下拉
      getresponsiblePersonList() {
        responsibleSelect().then((res) => {
           this.responsiblePersonList = res.result
        })
        .finally(() => {
          this.loading = false;
        });
        console.log('this.industryList',this.industryList)
      },
      /* 查询全部列表 */
      getAllList(){
        this.loading = true;
        getAllList(this.queryParams).then(response => {
          response.result.records.forEach(item => {
            for (var key in item) {
              if (item[key] === '') {
                item[key] = "-";
              }
            }
          });
          this.tabList = response.result.records;
          this.total = response.result.total;
          this.loading = false;
        });
      },
      /** 查询列表 */
      getList() {
        this.loading = true;
        getList(this.queryParams).then(response => {
          response.result.records.forEach(item => {
            for (var key in item) {
              if (item[key] === '') {
                item[key] = "-";
              }
            }
          });
          this.tabList = response.result.records;
          this.total = response.result.total;
          this.loading = false;
        });
      },
      handleChange(value) { 
        let _this = this;
        console.log(value);
        if (value.length == 2) {
          _this.filter.shopType = value[1];
          _this.filter.shopTypeParent = value[0];
        } else {
          _this.filter.shopTypeParent = value[0];
          _this.filter.shopType = '';
        }
      },
      //处理时间
      changeTime(e){
        this.queryParams.beginTime = e[0]
        this.queryParams.endTime = e[1]
      },
      // 表单重置
      reset() {
        this.date = []
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          
        };
        this.resetForm("queryParams");
        this.handleQuery()
      },
      //新增
      addClick() {
        this.dialogVisible = true;
        this.pathType = 'add'
      },
      //编辑
      editClick(row) {
        this.id = row.id
        this.dialogVisible = true;
        this.pathType = 'edit'
      },
      //查看
      lookClick(row){
        // this.dialogVisible = true;
        // this.pathType = 'look'
        // this.id = row.id
        this.$router.push({
          path: "/customerFileDetail",
          query: {
            id: row.id,
            clientName: row.clientName,
            pathType: 'index'
          },
        })
      },
      // 客户跟进
      async customerFollowUp() {
          try {
              var res = await userInfo()
              let result = res.result
              this.isResponsible = result.isResponsible
              //是否负责人 1 否 2 是
              
              if (this.isResponsible == 2) {
                  console.log('process.env.VUE_APP_CUSTOM_URL', process.env.VUE_APP_CUSTOM_URL)
                  // let url = 'http://192.168.0.118:8086/sysh5/#/pages/customerFollowUp/customerFollowUp?token=' + getToken()
                  let url = process.env.VUE_APP_CUSTOM_URL + '/sysh5/#/pages/customerFollowUp/customerFollowUp?token=' + getToken()
                  window.open(url, '_blank');
                  // window.onload = 
              } else {
                  this.$message.error('暂无权限')
              }
          } catch (error) {

          }
      },
      //切换列表
      handleNav(id){
        this.current = id
        this.queryParams.pageNum = 1
        this.queryParams.clientFilterType = id
        if(this.hasAllPermission == 1 && id == ''){
          this.getAllList()
        }else{
          this.getList() 
        }
      },
      sortChange({ column, prop, order }){
        console.log('order',order)
        if(prop == 'completionRate'){
          this.queryParams.sort = 1
          if(order == 'ascending'){
            this.queryParams.sortType = 1
          }else if(order == 'descending'){
            this.queryParams.sortType = 2
          }else{
            this.queryParams.sortType = 2
          }
        }
        if(this.hasAllPermission == 1 && this.current == ''){
          this.getAllList()
        }else{
          this.getList();
        }
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        
        if(this.hasAllPermission == 1 && this.current == ''){
          this.getAllList()
        }else{
          this.queryParams.clientFilterType = this.current
          this.getList();
        }
      },
      /** 重置按钮操作 */
      resetQuery() {
        // this.resetForm("queryForm");

        this.reset();
      },
      _handleSuccess(e) {
        //成功回调
        this.queryParams.sort = ''
        this.sortType = ''
        this.getPermission()
        
      },
      //关联林客商户ID
      associationView(id){
        this.$prompt('请输入林客商户ID', '关联林客商户ID', {
          confirmButtonText: '确认关联',
          cancelButtonText: '取消',
          inputValidator: (value) => {
            let regNumber = /^\d*$/; //限制只能输入数字
            if (value!=''&& value!=null&& regNumber.test(value) == false) {
              if(regNumber.test(value) == false){
                return '请输入数字'
              }
            }else if(value!='' && value!=null && value.length>20){
              return '输入值不能超过20位'
            }else {
              return true
            }
          },
        }).then(({ value }) => {
          let data = {
            id: id,
            dyLkMerchantId: value
          }
          bindLkMerchant(data).then(res => {
            this.$message({
              type: 'success',
              message: '操作成功'
            });
            if(this.hasAllPermission == 1 && this.current == ''){
              this.getAllList()
            }else{
              this.queryParams.clientFilterType = this.current
              this.getList();
            }
          });
        }).catch(() => {});
      },
    }
  };

</script>
<style  lang="scss" scoped>
  .head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
  }

  .listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
    margin-top: 10px;
  }

  .listBox_head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 18px;
    .navBox{
      display: flex;
      justify-content: flex-start;
      .navList{
        display: flex;
        flex-direction: column;
        margin-right: 40px;
        cursor: pointer;
        .txt{
          font-size: 18px;
          color: #333;
          font-weight: bold;
        }
        .xian{
          width: 70px;
          height: 6px;
          border-radius: 4px;
          background: #1890ff;
          margin-top: 6px;
        }
      }
    }
    .right{
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
  }

  .img_box {
    width: 100px;
    height: 80px;
    border-radius: 4px;
  }
  .merchant_id_span{
    color: #1890ff;
    cursor: pointer;
  }
  .merchant_id_span:hover{
    opacity: 0.8;
  }
</style>
  